<template>
  <div class="app-container" style="">
    <div class="search-header">
      <el-form ref="whereform" :model="whereform" label-width="80px" class="form-block">
        <el-form-item label="线路名称">
          <el-select v-model="whereform.line_id" filterable placeholder="请选择">
            <el-option
              v-for="item in line_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排班日期">
          <el-date-picker
            v-model="whereform.date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-M-d"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-row style="padding:20px">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="add_regular">班次排班</el-button>

      </el-row>
      <el-table
        :data="regularData"
        style="width: 100%"
      >
        <el-table-column
          label="线路名称"
          width="220"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="班次"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.regular_date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="验证码"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.verify_code }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.work_status }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="可售座位数"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.seat }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="售票数"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.sale }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          width="180"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.remark">{{ scope.row.remark }}</span>
            <span v-else> -- </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding:10px;">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[20, 40, 80, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <el-dialog
      :visible="add_show"
      title="班次排班"
      ok-text="保存"
      width="400px"
      top="50px"
      :before-close="handelClose1"
    >
      <el-form :model="regularform">
        <el-form-item label="排班线路 ">
          <el-select v-model="regularform.line_id" filterable placeholder="请选择">
            <el-option
              v-for="item in line_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排班日期 ">
          <el-date-picker
            v-model="regularform.pan_date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="座位数">
          <el-input-number v-model="regularform.seat" controls-position="right" size="mini" :min="1" :max="10000" />

        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="regularform.remark"
            type="textarea"
            placeholder="请输入内容"
            maxlength="100"
            show-word-limit
          />

        </el-form-item>
        <el-form-item style="margin-left:40%">
          <el-button type="primary" @click="add_po()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { aysnc_line_list, add_pan_regular, aysnc_regular_list, delete_pan } from '@/api/ctm_bus'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {

      whereform: {
        page: 1,
        limit: 20,
        line_id: '',
        date: ''
      },
      total: 0,
      pageSize: 0,
      currentPage4: 1,
      list: null,
      listLoading: true,
      regularData: [],
      add_show: false,
      regularform: {
        line_id: '',
        pan_date: '',
        seat: '',
        remark: ''
      },
      line_list: []
    }
  },
  created() {
    // 今天的时间
    var day2 = new Date()
    day2.setTime(day2.getTime())
    var s2 = day2.getFullYear() + '-' + (day2.getMonth() + 1) + '-' + day2.getDate()
    this.whereform.date = [s2, s2]
    this.fetchData(this.whereform)
    this.loadLineList()
  },
  methods: {
    add_regular() {
      this.add_show = true
    },
    handelClose1() {
      this.add_show = false
    },
    loadLineList(query) {
      aysnc_line_list({ 'query': query }).then(res => {
        console.log(res)
        if (res.code !== 200) return this.$message.error(res.msg)
        this.line_list = res.data.data
      })
    },
    add_po() {
      add_pan_regular(this.regularform).then(res => {
        console.log(res)
        if (res.code !== 200) return this.$message.error(res.msg)
        this.add_show = false
         this.fetchData(this.whereform)
        return this.$message.success(res.msg)
      })
    },
    handleEdit(index, row) {
      return this.$message.error('不可编辑')
      // this.$router.push({ name: 'addCtmLine', params: {
      //   id: row.id
      // }})
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.whereform.limit = val
      this.fetchData(this.whereform)
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.whereform.page = val
      this.fetchData(this.whereform)
      console.log(`当前页: ${val}`)
    },
    onSubmit() {
      this.fetchData(this.whereform)
    },
    fetchData(where) {
      this.listLoading = true
      aysnc_regular_list(where).then(res => {
        if (res.code !== 200) return this.$message.error(res.msg)
        this.regularData = res.data.data
        this.total = res.data.count
        this.listLoading = false
      })
    },
    handleDelete(index, row) {
      delete_pan({ id: row.id }).then(res => {
        if (res.code === 200) {
          this.fetchData()
          this.$message({ showClose: true, message: res.msg, type: 'success' })
        } else {
          this.$message({ showClose: true, message: res.msg, type: 'error' })
        }
      }).catch(error => { this.$message({ showClose: true, message: error, type: 'error' }) })
    }
  }
}
</script>
<style scoped>
.app-container{
  background:#f0f2f5;
}
.search-header{
  background: #fff;
  padding: 10px 20px;
  margin: 10px 10px;
  display: flex;
}
.form-block {
  display:flex;
  padding: 10px 20px;
  margin: 10px 0;
}
.content{
  margin: 10px 10px;
   background: #fff;

}
</style>
